<template>
  <view class="container">
    <u-navbar title="添加案例" title-size="36"></u-navbar>
    <u-gap height="20" bg-color="#f7f7f7"></u-gap>
    <view class="con-area">
      <view class="">
        案例封面
        <u-upload ref="uUpload" max-count="1" :action="upUrl" :file-list="form.coverUrl"></u-upload>
      </view>
    </view>

    <view class="view-item">
      <view class=""> 案例标题</view>
      <input v-model="form.title" type="text" placeholder="请输入案例标题" />
    </view>

    <view @click="onRich" v-model="form.content" class="con-area">
      <view class=""> 添加案例描述</view>
      <!-- <textarea class="inp-area" placeholder="请输入" name="" id="" cols="50" rows="80"></textarea> -->
    </view>

    <view class="floor">
      <view @click="submit" class="submit-btn"> 确认提交</view>
    </view>
  </view>
</template>

<script>
import { BASE_URL, UP_URL } from '@/common/config.js'

export default {
  data() {
    return {
      upUrl: BASE_URL + UP_URL,
      form: {
        title: '',
        content: '',
        coverUrl: [],
        areaId: 520102
      }
    }
  },
  methods: {
    onRich() {
      uni.$on('rich', (res) => {
        this.form.content = res
        uni.$off('rich')
      })

      uni.navigateTo({
        url: '/other_center/mer-rich-text/mer-rich-text?description=' + this.form.content
      })
    },
    submit() {
      this.$refs.uUpload.lists.forEach((val) => {
        if (val.response) {
          this.form.coverUrl = val.response.data
        }
      })
      if (!this.form.title) {
        this.$u.toast('标题不能为空')
        return
      }
      if (!this.form.content) {
        this.$u.toast('项目描述不能为空')
        return
      }
      if (!this.form.coverUrl) {
        this.$u.toast('项目封面不能为空')
        return
      }

      this.$u.post('/app-api/construction/project-case/create', this.form).then((res) => {
        this.$u.toast('成功')
        setTimeout(() => {
          uni.navigateBack()
        }, 800)
      })
    }
  }
}
</script>

<style>
@import url('../../style/btn.css');

page {
  background-color: #f7f7f7;
}

.warning {
  padding: 20rpx;
  background-color: #f5e8e6;
  color: #f54831;
  font-size: 26rpx;
}

.con-area {
  padding: 20rpx;
  background-color: #fff;
}

.view-item {
  display: flex;
  background-color: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
}

.view-item view {
  flex: 2;
}

.view-item input {
  flex: 8;
}

.floor {
  position: absolute;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
}

.inp-area {
  width: 100%;
  height: 640rpx;
}
</style>
